<template>
	<app-layout>
		<view class="app-goods" v-show="loading">
			<view class="banner">
				<app-banner
					:videoUrl="detail.video_url"
					:share="detail.share"
					:picList="detail.pic_url"
					:goods_id="goods_id"
					sign="miaosha"
				></app-banner>
			</view>

			<!-- 拼团时间 -->
			<view class="time">
				<app-goods-time 
					:day="day"
					:second="second"
					:minute="minute"
					:hour="hour"
					:miaosha_status="miaosha_status"
				></app-goods-time>
			</view>
			
			<view class="price-title-share">
				<app-price-title-share
						:is_vip_card_user="is_vip_card_user"
				 		:discount='discount'
						:name="detail.name"
                        :price_member_max="detail.price_member_max"
                        :price_member_min="detail.price_member_min"
                        :price_min="detail.price_min"
                        :price_max="detail.price_max"
						:level_show="detail.level_show"
						:original_price = "detail.original_price"
						:miaosha_buy_count="miaosha_buy_count"
						:url="url"
						:unit="detail.unit"
				></app-price-title-share>
			</view>
			<view class="join-member" v-if="detail.level_show === 2">
				<app-join-member
						:member-max-price="detail.price_member_max"
						:member-min-price="detail.price_member_max"
						:price="detail.price"
				></app-join-member>
			</view>
	        <view class="vip-card">
	            <app-vip-card background="#fff" top="0" v-if="is_vip"></app-vip-card>
	        </view>
			<view class="merchant-guarantee" v-if="detail.services.length > 0">
				<app-goods-service :list="detail.services" :border="false"></app-goods-service>
			</view>
			<view class="marketing">
				<app-goods-marketing
					:express="detail.express"
					:pickup="detail.goods_marketing.pickup"
                    :shipping="detail.goods_marketing.shipping"
					:limit="detail.goods_marketing.limit"
					:card="detail.goods_marketing_award.card"
					:integral="detail.goods_marketing_award.integral"
				></app-goods-marketing>
			</view>
			<view class="attr">
				<app-attr :goods="detail"
				          :attrGroupList="detail.attr_groups"
				          @attrtap="attrtap"
				          ref="attr"
				          :show="show"
				          :selectAttr="selectAttr"
				          :previewUrl="previewUrl"
				          :submitUrl="submitUrl"
				          @attr="attr"
				>
					<app-goods-attr
							slot="button"
							:attr-groups="detail.attr_groups"
							:selectAttr="selectAttr"
							:attr="detail.attr"
					></app-goods-attr>
				</app-attr>
			</view>

			<!-- 商品详情 -->
			<view class="goods-detail">
				<app-goods-detail :goods="detail"></app-goods-detail>
			</view>
			
			<!-- 相关推荐 -->
			<view class="product-list" v-if="list.length > 0">
				<app-related-suggestion-product :list="list"></app-related-suggestion-product>
			</view>

			<!-- 空白格  -->
			<view>
				<app-empty-bottom :height="Number(110)"></app-empty-bottom>
			</view>

			<!-- 底部按钮 -->
			<view>
				<app-iphone-x>
					<view slot="empty-area" class="buttons dir-left-nowrap">
						<view class="app-home">
							<app-jump-button form arrangement="a" url="/pages/index/index">
								<view class="app-view dir-top-nowrap main-center cross-center">
									<image src="../../../static/image/icon/index.png"></image>
									<text>首页</text>
								</view>
							</app-jump-button>
						</view>
						<view class="app-button dir-left-nowrap" v-if="detail.goods_stock == 0">
							<view class="app-over box-grow-1" style="background-color: #CDCDCD;color: #fff;">
								已售罄
							</view>
						</view>
						<view v-else class="app-button dir-left-nowrap">
							<view class="app-join-cart box-grow-1" v-if="miaosha_status === 1">
								<app-form-id @click="joinCart">
									加入购物车
								</app-form-id>
							</view>
							<view class="app-buy box-grow-1" v-if="miaosha_status === 1">
								<app-form-id @click="buy">立即购买</app-form-id>
							</view>
							<view class="notStart box-grow-1" v-if="miaosha_status === 2">
								活动未开始
							</view>
							<view class="app-over box-grow-1" v-if="miaosha_status === 0">
								活动已结束
							</view>
						</view>
					</view>
				</app-iphone-x>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {mapState} from 'vuex';
	import appBanner from '../../../components/page-component/goods/app-goods-banner.vue';
	import appGoodsTime from '../components/app-goods-time.vue';
	import appMerchantGuarantee from '../components/app-merchant-guarantee.vue';
	import appPriceTitleShare from '../components/app-price-title-share.vue';
	import appAttr from '../../../components/page-component/app-attr/app-attr.vue';
	import appGoodsAttr from '../../../components/page-component/goods/app-goods-attr.vue';
    import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
	import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue';
	import appGoodsMarketing from '../../../components/page-component/goods/app-goods-marketing.vue';
    import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
    import appGoodsDetail from '../../../components/page-component/goods/app-goods-detail.vue';
    import appIphonexBottom from '../../../components/page-component/app-iphonex-bottom/app-iphonex-bottom.vue';
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import appEmptyBottom from'../../../components/basic-component/app-empty-bottom/app-empty-bottom.vue';
    import AppVipCard from '../../../components/page-component/app-vip-card/app-vip-card';
    
    export default {
        name: 'goods',
	    data() {
            return {
                detail: {},
                cartShow: false,
                miaosha_status: -1,
                miaosha_time: 0,
                selectAttr: {},
                previewUrl: this.$api.miaosha.order_preview,
                submitUrl: this.$api.miaosha.order_submit,
	            url: '',
                show: false,
	            list: [],
                miaosha_buy_count: 0,
                appAttr: {},
                goods_id: -1,
                hour: 0,
                minute: 0,
                second: 0,
                day: 0,
                time: -1,
                is_vip_card_user: 0,
                discount: null,
                is_vip: false,
                loading: false,
            }
	    },
	    onLoad(options) {
            this.goods_id = options.id || options.goods;
	    },
	    onShow() {
	    	this.$nextTick(() => {
				let that = this;
				this.request({
					url: this.$api.miaosha.goods_detail,
					data: {
						id: this.goods_id,
					}
				}).then(response => {
					let { detail, miaosha_status,miaosha_time, miaosha_buy_count } = response;
					this.detail = detail;
					this.miaosha_status = miaosha_status;
					this.miaosha_buy_count = miaosha_buy_count;
					this.loading = true;
					this.url = `${this.$api.miaosha.poster}&goods_id=${this.detail.id}`;
					this.getTime(miaosha_time);
					this.request({
						url: this.$api.goods.new_recommend,
						data: {
							goods_id: this.detail.id,
						}
					}).then(response => {
						this.list = response.list;
						if(that.detail.vip_card_appoint.discount > 0) {
							that.is_vip = true;
							that.discount = that.detail.vip_card_appoint.discount
						}
						that.is_vip_card_user = that.detail.vip_card_appoint.is_vip_card_user
					})
				});
			})
	    },
	    onHide() {
            clearInterval(this.time);
	    },
        onUnload() {
            clearInterval(this.time);
        },
	    computed: {
            ...mapState('gConfig',{
                iphone: (data) => {
                    return data.iphone;
                },
                iphoneHeight: (state) =>{
                    return  state.iphoneHeight;
                },
            }),
            ...mapState({
                mall: state => state.mallConfig.mall
            })
	    },
	    onShareAppMessage() {
	        return this.$shareAppMessage({
	            path: '/plugins/miaosha/goods/goods',
	            title: this.detail.app_share_title ? this.detail.app_share_title : this.detail.name,
	            imageUrl: this.detail.app_share_pic ? this.detail.app_share_pic : '',
	            params: {
	                id: this.detail.id,
	            }
	        });
	    },
	    methods: {
            attr(data) {
                this.appAttr = data;
            },
            async request({url, data}) {
                const response = await this.$request({
	                url: url,
	                data: data,
                });
                if (response.code === 0) {
                    return response.data;
                }
            },
            attrtap(data) {
                if (data !== null) {
                    this.selectAttr = data;
                } else {
                    this.selectAttr = {};
                }
            },
            joinCart() {
                if (this.appAttr.display === 'none') {
                    this.show = Math.random();
                } else {
                    this.$request({
	                    url: this.$api.miaosha.add_cart,
	                    method: 'post',
	                    data: {
                            miaosha_goods_id: this.selectAttr.goods_id,
                            attr_id: this.selectAttr.id,
                            num: this.appAttr.number,
	                    }
                    }).then(response => {
                        if (response.code === 0) {
                            this.appAttr.display = 'none';
                        }
                    })
                }
            },
            buy() {
                if (this.appAttr.display === 'none') {
                    this.show = Math.random();
                } else {
                    let mch_id = this.detail.mch_id;
                    let mch_list = [];
                    let goods = {
                        id: this.detail.id,
                        attr: [],
                        num: this.appAttr.number,
                        goods_attr_id: this.selectAttr.id,
                        cart_id: 0,
                    };
                    for (let i = 0; i < this.selectAttr.attr_list.length; i++) {
                        let attr = {
                            attr_id: this.selectAttr.attr_list[i].attr_id,
                            attr_group_id: this.selectAttr.attr_list[i].attr_group_id,
                        };
                        goods.attr.push(attr);
                    }
                    mch_list.push({
                        mch_id: mch_id,
                        goods_list: [goods],
                    });
                    this.$jump({
                        open_type: 'navigate',
                        url: `/pages/order-submit/order-submit?mch_list=${JSON.stringify(mch_list)}&preview_url=${encodeURIComponent(this.$api.miaosha.order_preview)}&submit_url=${encodeURIComponent(this.$api.miaosha.order_submit)}`
                    });
                }
            },
		    getTime(newValue) {
                newValue = newValue - 1;
                this.day = parseInt(newValue / 3600 / 24);
                this.hour = parseInt(newValue / 3600 % 24);
                this.minute = parseInt(newValue / 60 % 60);
                this.second = parseInt(newValue % 60);
                clearInterval(this.time);
                this.time = setInterval(() => {
                    newValue = newValue - 1;
                    if (newValue < 0) {
                        clearInterval(this.time);
                    }
                    this.day = parseInt(newValue / 3600 / 24);
                    this.hour = parseInt(newValue / 3600 % 24);
                    this.minute = parseInt(newValue / 60 % 60);
                    this.second = parseInt(newValue % 60);
                }, 1000);
		    }
	    },
	    components: {
            'app-banner': appBanner,
		    'app-goods-time': appGoodsTime,
		    'app-merchant-guarantee': appMerchantGuarantee,
		    'app-price-title-share': appPriceTitleShare,
		    'app-attr': appAttr,
		    'app-goods-attr': appGoodsAttr,
            'app-related-suggestion-product': appRelatedSuggestionProduct,
		    'app-goods-service': appGoodsService,
		    'app-goods-marketing': appGoodsMarketing,
		    'app-join-member': appJoinMember,
            'app-goods-detail': appGoodsDetail,
		    'app-iphone-bottom': appIphonexBottom,
            'app-iphone-x': appIphoneX,
            'app-empty-bottom': appEmptyBottom,
            'app-vip-card': AppVipCard,
        }
    }
</script>

<style scoped lang="scss">

    .vip-card {
        padding: 0 #{20rpx} #{20rpx};
        background-color: #fff;
    }

    .merchant-guarantee {
    	margin-top: #{20rpx};
    }

	.app-goods {
		background-color: #f7f7f7;
	}
	.attr {
		margin: #{20rpx} 0;
	}
	.marketing {
		margin-top: #{20rpx};
	}
	.buttons {
		width: #{750rpx};
		height: #{110rpx};
		border-top: #{1rpx} solid #e2e2e2;
		.app-home {
			width: #{105rpx};
			height: #{110rpx};
			background-color: white;
			.app-view {
				width: #{105rpx};
				height: #{110rpx};
				image {
					width: #{40rpx};
					height: #{40rpx};
				}
				text {
					font-size: #{18rpx};
					color: #707070;
					
				}
			}
		}
		.app-button {
			width: #{645rpx};
			height: #{110rpx};
			text-align: center;
			line-height: #{110rpx};
			color: white;
			.app-join-cart {
				height: #{110rpx};
				background-color: #f39800;
			}
			.app-buy {
				height: #{110rpx};
				background-color: #ff4544;
			}
			.notStart {
				height: #{110rpx};
				background-color: #cccccc;
			}
			.app-over {
				height: #{110rpx};
				background: #666;
			}
		}
	}
	.product-list {
		background-color: white;
	}

	.join-member {
		background-color: #ffffff;
		padding: 0 #{24rpx};
	}
	.app-bottom {
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>